<template>
	<view class="template-mine tn-safe-area-inset-bottom">
		<view class="nav-header">
			<text class="nav-title">服务</text>
		</view>
		<view class="top-backgroup">
			<image src="../../static/my-bg4.png" style="width: 100%"></image>
		</view>
		<view class="about__wrap">
			<!-- 图标logo/头像 -->
			<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom">
				<view class="justify-content-item" style="margin-bottom: 20px; margin-left: 30px">
					<view class="profile-info tn-flex tn-flex-col-center tn-flex-row-left tn-padding-vertical-sm">
						<!-- 头像区域 -->
						<view class="logo-image tn-relative" @click="handleAvatarClick">
							<view
								class="tn-shadow-blur profile-avatar"
								:style="{
									backgroundImage: userInfo && userInfo.avatarUrl ? `url(${userInfo.avatarUrl})` : 'url(/static/tabbar/navlogo.png)',
									width: '120rpx',
									height: '120rpx',
									backgroundSize: 'cover',
									borderRadius: '50%',
									transition: 'transform .3s ease'
								}"
							></view>
						</view>

						<!-- 校友卡信息 -->
						<view class="card-info tn-padding-left-md">
							<view class="tn-text-xl tn-text-bold" style="margin-left: 18px; color: #00695c">
								<text v-if="userInfo">{{ userInfo.nickName }}的校友卡</text>
								<text v-else>校 友 卡</text>
							</view>
							<view class="tn-text-lg tn-padding-top-xs">
								<block v-if="isLogin">
									<text class="tn-text-bold"style="margin-left: 18px; color: #00695c">NO.88888</text>
								</block>
								<block v-else>
									<text class="tn-color-gray" style="margin-left: 18px">未领取校友卡</text>
								</block>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 更多信息-->
			<view class="about-shadow tn-margin-top-xl tn-padding-top-sm tn-padding-bottom-sm tn-bg-white">
				<!-- 方式12 start-->
				<view class="tn-flex tn-flex-row-center tn-radius tn-padding-top">
					<view class="tn-padding-sm tn-margin-xs tn-radius" @click="tn('/circlePages/blogger')">
						<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
							<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-orange">
								<view class="tn-icon-flag" style="color: #080808"></view>
							</view>
							<view class="tn-text-center">
								<text class="tn-text-ellipsis">我的活动</text>
							</view>
						</view>
					</view>
					<view class="tn-padding-sm tn-margin-xs tn-radius" @click="tn('/pages/circle/my-donations')">
						<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
							<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-orange">
								<view class="tn-icon-refund" style="color: #080808"></view>
							</view>
							<view class="tn-text-center">
								<text class="tn-text-ellipsis">我的捐款</text>
							</view>
						</view>
					</view>
					<view class="tn-padding-sm tn-margin-xs tn-radius" @click="tn('/minePages/backSchool')">
						<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
							<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-orange">
								<view class="tn-icon-ticket" style="color: #080808"></view>
							</view>
							<view class="tn-text-center">
								<text class="tn-text-ellipsis">返校申请</text>
							</view>
						</view>
					</view>
					<view class="tn-padding-sm tn-margin-xs tn-radius" @click="tn('/minePages/organization')">
						<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
							<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-orange">
								<view class="tn-icon-organizatio" style="color: #080808"></view>
							</view>
							<view class="tn-text-center">
								<text class="tn-text-ellipsis">我的组织</text>
							</view>
						</view>
					</view>
				</view>
				<view class="tn-flex tn-flex-row-center tn-radius tn-padding-top">
					<view class="tn-padding-sm tn-margin-xs tn-radius" @click="tn('/circlePages/chat')">
						<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
							<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-orange">
								<view class="tn-icon-order" style="color: #080808"></view>
							</view>
							<view class="tn-text-center">
								<text class="tn-text-ellipsis">我的收藏</text>
							</view>
						</view>
					</view>
					<view class="tn-padding-sm tn-margin-xs tn-radius" @click="tn('/minePages/realname_authentication')">
						<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
							<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-orange">
								<view class="tn-icon-bankcard" style="color: #080808"></view>
							</view>
							<view class="tn-text-center">
								<text class="tn-text-ellipsis">校 友 卡</text>
							</view>
						</view>
					</view>
					<view class="tn-padding-sm tn-margin-xs tn-radius" @click="tn('/minePages/integral')">
						<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
							<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-orange">
								<view class="tn-icon-program" style="color: #080808"></view>
							</view>
							<view class="tn-text-center">
								<text class="tn-text-ellipsis">积分明细</text>
							</view>
						</view>
					</view>
					<view class="tn-padding-sm tn-margin-xs tn-radius" @click="tn('/minePages/set')">
						<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
							<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-orange">
								<view class="tn-icon-set" style="color: #080808"></view>
							</view>
							<view class="tn-text-center">
								<text class="tn-text-ellipsis">全局设置</text>
							</view>
						</view>
					</view>
				</view>
				<!-- 方式12 end-->
			</view>

			<!-- 更多信息-->
			<view class="about-shadow tn-margin-top-xl tn-padding-top-sm tn-padding-bottom-sm">
				<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" @click="tn('/minePages/protocol')">
					<view class="tn-flex tn-flex-col-center">
						<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-3 tn-color-white">
							<view class="tn-icon-safe-fill"></view>
						</view>
						<view class="tn-margin-left-sm tn-flex-1">使用协议</view>
						<view class="tn-color-red--light tn-icon-tips"></view>
					</view>
				</tn-list-cell>
				<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" @click="tn('/minePages/help')">
					<button class="tn-flex tn-flex-col-center tn-button--clear-style" open-type="feedback">
						<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-7 tn-color-white">
							<view class="tn-icon-comment-fill"></view>
						</view>
						<view class="tn-flex tn-flex-row-between" style="width: 100%">
							<view class="tn-margin-left-sm">问题反馈</view>
							<view class="tn-color-green--light tn-icon-edit"></view>
						</view>
					</button>
				</tn-list-cell>
				<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" @click="callPhoneNumber" data-number="18219126666">
					<view class="tn-flex tn-flex-col-center">
						<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-9 tn-color-white">
							<view class="tn-icon-phone-fill"></view>
						</view>
						<view class="tn-margin-left-sm tn-flex-1">技术支持</view>
						<view class="tn-margin-left-sm tn-text-sm tn-padding-left-xs tn-padding-right-xs --disabled tn-round">177****3186</view>
					</view>
				</tn-list-cell>
			</view>
		</view>
		<div class="content-wrapper">
			<span class="normal-text">技术支持：</span>
			<span class="art-text">计算机四班团队</span>
		</div>
	</view>
</template>

<script>
export default {
	name: 'Mine',
	data() {
		return {
			isLogin: false, // 默认未登录
			userInfo: {}, // 初始化为空对象而非null，确保Vue响应式系统正常工作
			updateTimer: null // 用于防抖的定时器
		};
	},
	// 组件挂载时执行
	mounted() {
		// 仅在开发环境输出日志
		if (process.env.NODE_ENV !== 'production') {
			console.log('mine组件挂载，开始获取登录状态和用户信息');
		}
		// 延迟初始化，避免阻塞UI
		setTimeout(() => {
			this.updateUserInfo();
		}, 50);
	},
	
	// 组件更新时执行（当从其他tab切换到mine tab时会触发）
	updated() {
		// 避免在更新过程中再次触发更新循环
		// 移除可能导致无限循环的updateUserInfo调用
		// 使用$nextTick确保DOM更新完成后再进行任何操作
		this.$nextTick(() => {
			// 仅在开发环境输出日志
			if (process.env.NODE_ENV !== 'production' && this.$parent && this.$parent.currentIndex === 4) {
				console.log('mine组件已更新');
			}
		});
	},
	
	// 添加页面显示时的钩子，用于在页面显示时更新数据
	// 这是UniApp提供的页面显示钩子，替代可能导致无限循环的updated钩子
	onShow() {
		// 延迟更新，避免阻塞UI
		setTimeout(() => {
			// 避免重复更新，只有当用户信息为空或不完整时才更新
			if (!this.userInfo || !this.userInfo.nickName || !this.userInfo.avatarUrl) {
				this.updateUserInfo();
			}
		}, 100);
	},
	methods: {
			// 提供给父组件调用的方法，用于主动更新用户信息
			updateUserInfo(userInfoFromParent = null) {
				try {
					// 如果父组件直接传递了用户信息，优先使用
					if (userInfoFromParent && typeof userInfoFromParent === 'object' && userInfoFromParent.nickName && userInfoFromParent.avatarUrl) {
						// 简化赋值，避免不必要的深拷贝
						this.userInfo = { ...userInfoFromParent };
						this.isLogin = true;
						return;
					}
					
					// 从本地存储获取登录状态
					const isLogin = uni.getStorageSync('isLogin');
					
					// 从本地存储获取 用户信息
					let userInfo = uni.getStorageSync('userInfo');
					
					// 验证用户信息是否完整
					if (userInfo && typeof userInfo === 'object' && userInfo.nickName && userInfo.avatarUrl) {
						// 使用展开运算符进行浅拷贝，避免深拷贝的性能开销
						this.userInfo = { ...userInfo };
						this.isLogin = !!isLogin;
					} else {
						this.userInfo = {};
						this.isLogin = !!isLogin;
					}
				} catch (error) {
					// 仅在开发环境输出错误
					if (process.env.NODE_ENV !== 'production') {
						console.error('更新用户信息失败:', error);
					}
					// 错误处理，确保页面不会崩溃
					this.userInfo = {};
					this.isLogin = false;
				}
			},
			
			// 跳转封装（未登录时强制跳登录）
			tn(url) {
				// 确保在页面更新后再执行跳转
				this.$nextTick(() => {
					if (!this.isLogin && url !== '/minePages/signed') {
						if (process.env.NODE_ENV !== 'production') {
							console.log('未登录，跳转到登录页');
						}
						uni.navigateTo({ url: '/minePages/signed' });
						return;
					}
					if (process.env.NODE_ENV !== 'production') {
						console.log('已登录，跳转到:', url);
					}
					uni.navigateTo({ url });
				});
			},

			// 头像点击：未登录跳登录页，已登录跳设置页
			handleAvatarClick() {
				this.$nextTick(() => {
					if (!this.isLogin) {
						if (process.env.NODE_ENV !== 'production') {
							console.log('未登录，点击头像跳转到登录页');
						}
						uni.navigateTo({ url: '/minePages/signed' });
					} else {
						if (process.env.NODE_ENV !== 'production') {
							console.log('已登录，点击头像跳转到设置页');
						}
						uni.navigateTo({ url: '/minePages/set' });
					}
				});
			},
			// 收货地址
			navAddress() {
				uni.chooseAddress({});
			},
			// 震动跳转
			navThanks(e) {
				wx.vibrateShort();
				uni.navigateTo({
					url: '/minePages/thanks'
				});
			},
			//拨打固定电话
			callPhoneNumber() {
				uni.makePhoneCall({
					phoneNumber: '18219126666'
				});
			},
			// 复制开源地址
			copySource() {
				uni.setClipboardData({
					data: 'https://ext.dcloud.net.cn/plugin?id=8503'
				});
			}
	}
};
</script>

<style lang="scss" scoped>
.template-mine {
	max-height: 100vh;
}
.tn-tabbar-height {
	min-height: 120rpx;
	height: calc(140rpx + env(safe-area-inset-bottom) / 2);
}

/* 自定义导航栏内容 start */
.custom-nav {
	height: 100%;

	&__back {
		margin: auto 5rpx;
		font-size: 40rpx;
		margin-right: 10rpx;
		flex-basis: 5%;
		width: 100rpx;
		position: absolute;
	}
}
.top-backgroup {
	position: relative; /* 作为内部元素或伪元素的定位容器 */
	z-index: -1; /* 置于其他元素下方（需注意父级 z-index 影响） */
	overflow: hidden; /* 裁剪超出容器的内容 */
	/* 固定容器高度 */

	.background-image {
		/* 修正拼写错误 */
		width: 100%;
		height: 100%; /* 继承容器高度，保持自适应 */
		display: block; /* 清除图片默认的 inline 间距 */
		object-fit: cover; /* 图片按比例填充容器，避免拉伸 */
	}
}

/* 标题 start */
.nav_title {
	-webkit-background-clip: text;
	color: #0e122a;

	&--wrap {
		position: relative;
		display: flex;
		height: 120rpx;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		background-size: cover;
	}
}
/* 标题 end */

/* 用户头像 start */
.logo-image {
	width: 110rpx;
	height: 110rpx;
	position: relative;
}

.logo-pic {
	background-size: cover;
	background-repeat: no-repeat;
	// background-attachment:fixed;
	background-position: top;
	border: 8rpx solid rgba(255, 255, 255, 0.05);
	box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
	border-radius: 50%;
	overflow: hidden;
	// background-color: #FFFFFF;
}

/* 页面 start*/
.about-shadow {
	border-radius: 15rpx;
	box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
}

.about {
	&__wrap {
		position: relative;
		z-index: 1;
		margin: 20rpx 30rpx;
		margin-top: -230rpx;
	}
}

/* 页面 end*/

/* 图标容器12 start */
.tn-three {
	position: absolute;
	top: 50%;
	right: 50%;
	bottom: 50%;
	left: 50%;
	transform: translate(-38rpx, -16rpx) rotateX(30deg) rotateY(20deg) rotateZ(-30deg);
	text-shadow: -1rpx 2rpx 0 #f0f0f0, -2rpx 4rpx 0 #f0f0f0, -10rpx 20rpx 30rpx rgba(0, 0, 0, 0.2);
}
.icon20 {
	&__item {
		width: 30%;
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 30rpx;
		margin: 20rpx 10rpx;
		transform: scale(1);
		transition: transform 0.3s linear;
		transform-origin: center center;

		&--icon {
			width: 100rpx;
			height: 100rpx;
			font-size: 60rpx;
			border-radius: 50%;
			margin-bottom: 18rpx;
			position: relative;
			z-index: 1;

			&::after {
				content: ' ';
				position: absolute;
				z-index: -1;
				width: 100%;
				height: 100%;
				left: 0;
				bottom: 0;
				border-radius: inherit;
				opacity: 1;
				transform: scale(1, 1);
				background-size: 100% 100%;
			}
		}
	}
}
.nav-header {
	background: #ffffff;
	height: 100rpx;
	padding-top: calc(env(safe-area-inset-top));
	box-sizing: content-box;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);

	.nav-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #1f4d4b;
		letter-spacing: 2rpx;
	}
}

/* 图标容器12 start */
.icon12 {
	&__item {
		width: 30%;
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 30rpx;
		margin: 20rpx 10rpx;
		transform: scale(1);
		transition: transform 0.3s linear;
		transform-origin: center center;

		&--icon {
			width: 15rpx;
			height: 15rpx;
			font-size: 50rpx;
			border-radius: 50%;
			margin-bottom: 38rpx;
			position: relative;
			z-index: 1;

			&::after {
				content: ' ';
				position: absolute;
				z-index: -1;
				width: 100%;
				height: 100%;
				left: 0;
				bottom: 0;
				border-radius: inherit;
				opacity: 1;
				transform: scale(1, 1);
				background-size: 100% 100%;
			}
		}
	}
}

/* 图标容器1 start */
.icon1 {
	&__item {
		// width: 30%;
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 30rpx;
		margin: 20rpx 10rpx;
		transform: scale(1);
		transition: transform 0.3s linear;
		transform-origin: center center;

		&--icon {
			width: 40rpx;
			height: 40rpx;
			font-size: 28rpx;
			border-radius: 50%;
			position: relative;
			z-index: 1;

			&::after {
				content: ' ';
				position: absolute;
				z-index: -1;
				width: 100%;
				height: 100%;
				left: 0;
				bottom: 0;
				border-radius: inherit;
				opacity: 1;
				transform: scale(1, 1);
				background-size: 100% 100%;
			}
		}
	}
}

/* 图标容器1 end */

/* 大嘴鸟*/
.dong {
	z-index: 9999;
	position: fixed;
	top: -40px;
	right: -80px;
	transform: scale(0.24);
	-webkit-transform: scale(0.24);
	-moz-transform: scale(0.24);
}

.monster {
	transform: rotate(-50deg);
	-ms-transform: rotate(-50deg);
	/* IE 9 */
	-moz-transform: rotate(-50deg);
	/* Firefox */
	-webkit-transform: rotate(-50deg);
	/* Safari 和 Chrome */
	-o-transform: rotate(-50deg);
	/* Opera */
	display: flex;
	justify-content: center;
	position: relative;
	width: 170px;
	height: 400px;
	border-top-left-radius: 200px;
	border-top-right-radius: 200px;
	background-color: #3c47d7;
	box-shadow: 20px 20px 60px #4650e5;
}

.monster__face {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	position: absolute;
	top: 14%;
	width: 75%;
	height: 160px;
}

.monster__noses {
	top: 50%;
	display: flex;
	justify-content: space-between;
	width: 28%;
	height: auto;
	margin-bottom: 10px;
}

.monster__nose {
	width: 8px;
	height: 12px;
	border-radius: 20px;
	background: rgba(0, 0, 0, 0.5);
	box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.1);
}

.monster__mouth {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 100%;
	height: 0%;
	overflow: hidden;
	border: 25px solid #ffc333;
	border-radius: 100px;
	background-color: #810332;
	animation: mouth 1.75s infinite;
	box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2);
	box-sizing: border-box;
}

.monster__mouth::before {
	content: '';
	position: absolute;
	width: 150px;
	height: 80px;
	border-radius: 100px;
	background-color: #400018;
}

.monster__mouth::after {
	content: '';
	position: absolute;
	bottom: -80px;
	width: 160px;
	height: 80px;
	border-top-left-radius: 50%;
	border-top-right-radius: 50%;
	background-color: #dc1b50;
	animation: tongue 1.75s infinite;
}

.monster__top {
	position: absolute;
	top: -30px;
	width: 170px;
	height: 30px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	background-color: #ffffff;
	z-index: 100;
	animation: t 1.75s infinite;
}

.monster__bottom {
	position: absolute;
	bottom: 0;
	width: 100px;
	height: 30px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	background-color: #ffffff;
	z-index: 100;
	animation: b 1.75s infinite;
}

.avatar-eye {
	position: absolute;
	top: -10%;
	width: 65px;
	height: 65px;
	background: linear-gradient(105deg, white, #cb87f4);
	border-radius: 100%;
	box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2);
	margin: 3px;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

.avatar-eye--green {
	background: linear-gradient(to bottom, #fdfdfd, #c3efea);
}

.avatar-eye--violet {
	background: linear-gradient(to bottom, #fdfdfd, #e6d6f6);
}

.eye--left {
	left: 10%;
}

.eye--right {
	left: 85%;
}

.eye--center {
	left: 45%;
	top: 10%;
}

.avatar-eye-pupil {
	position: absolute;
	width: 55%;
	height: 55%;
	left: 50%;
	top: 25%;
	-webkit-transform: translate(-50%);
	transform: translate(-50%);
	z-index: 100;
	border-radius: 100%;
}

.pupil--green {
	background: linear-gradient(135deg, rgba(188, 248, 177, 0.7), #2fa38c 75%);
}

.pupil--pink {
	background: linear-gradient(135deg, #f1a183, #8535cd);
}

.avatar-eye-pupil-blackThing {
	position: absolute;
	width: 55%;
	height: 55%;
	left: 50%;
	top: 25%;
	background: #2c2f32;
	-webkit-transform: translate(-50%);
	transform: translate(-50%);
	border-radius: 100%;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

.avatar-eye-pupil-lightReflection {
	position: absolute;
	width: 7px;
	height: 7px;
	left: 25%;
	top: 10%;
	background: #ebebeb;
	-webkit-transform: translate(-50%);
	transform: translate(-50%);
	border-radius: 100%;
	box-shadow: 10px 10px 10px rgba(255, 255, 255, 0.2);
}
/*大嘴动起来*/
@keyframes t {
	0%,
	10%,
	80%,
	100% {
		top: -30px;
	}

	20% {
		top: 0px;
	}

	30% {
		top: -20px;
	}

	40% {
		top: -0px;
	}

	50% {
		top: -25px;
	}

	70% {
		top: 0px;
	}
}

@keyframes b {
	0%,
	10%,
	80%,
	100% {
		bottom: -30px;
	}

	20% {
		bottom: 0px;
	}

	30% {
		bottom: -20px;
	}

	40% {
		bottom: -0px;
	}

	50% {
		bottom: -25px;
	}

	70% {
		bottom: 0px;
	}
}

@keyframes mouth {
	0%,
	10%,
	100% {
		width: 100%;
		height: 0%;
	}

	15% {
		width: 90%;
		height: 30%;
	}

	20% {
		width: 50%;
		height: 70%;
	}

	25% {
		width: 70%;
		height: 70%;
	}

	30% {
		width: 80%;
		height: 60%;
	}

	35% {
		width: 60%;
		height: 70%;
	}

	40% {
		width: 55%;
		height: 75%;
	}

	45% {
		width: 50%;
		height: 90%;
	}

	50% {
		width: 40%;
		height: 70%;
	}

	55% {
		width: 70%;
		height: 95%;
	}

	60% {
		width: 40%;
		height: 50%;
	}

	65% {
		width: 100%;
		height: 60%;
	}

	70% {
		width: 100%;
		height: 70%;
	}

	75% {
		width: 90%;
		height: 70%;
	}

	80% {
		width: 50%;
		height: 70%;
	}

	85% {
		width: 90%;
		height: 50%;
	}

	85% {
		width: 40%;
		height: 70%;
	}

	90% {
		width: 90%;
		height: 30%;
	}

	95% {
		width: 100%;
		height: 10%;
	}
}

@keyframes tongue {
	0%,
	20%,
	100% {
		bottom: -80px;
	}

	30%,
	90% {
		bottom: -40px;
	}

	40% {
		bottom: -45px;
	}

	50% {
		bottom: -50px;
	}

	70% {
		bottom: -80px;
	}

	90% {
		bottom: -40px;
	}
}

.tech-support {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 8px 0;
	background: #f8f9fa;
	border-top: 1px solid #eee;
}

/* 内层容器确保内容居中且限制最大宽度（避免在超宽屏幕上拉伸） */
.content-wrapper {
	text-align: center; /* 水平居中 */
	max-width: 1200px; /* 可选：限制最大宽度，适配宽屏 */
	margin: 0 auto; /* 配合max-width实现容器居中 */
}

.normal-text {
	font-size: 13px;
	color: #666;
	margin-right: 4px;
}

.art-text {
	font-size: 14px;
	font-weight: bold;
	background: linear-gradient(90deg, #2563eb, #ec4899);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
</style>
